<template>
	<view class="container">
		<view class="content">
			<view class="course_content">
				<view class="course_content_list" v-for="(courseListItem,courseListIndex) in recordData.list"
					:key="courseListIndex" @tap="goCourseDetails(courseListItem.courseId)">
					<view class="course_content_img">
						<image :src="courseListItem.courseCover" mode=""></image>
						<!-- <view class="course_content_tips"v-if="courseListItem.examId">考试</view> -->
					</view>
					<view class="course_content_text">
						<view class="course_content_text_name">{{courseListItem.courseName}}
						</view>
						<view class="course_content_text_tips">{{courseListItem.chapterName}}</view>
						<view class="course_content_text_time">{{courseListItem.createTime}}</view>
					</view>

				</view>
			</view>
		</view>
		<uni-load-more iconType="auto" :status="recordData.loading" />
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import api from '@/api'
	onLoad(async () => {

	})
	onShow(() => {
		getRecord()
	})
	const recordData = reactive({
		list: [],
		page: 1,
		limit: 20,
		loading: 'more'
	})

	const getRecord = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		recordData.loading = 'loading'
		const { data: { total = 0, records = [] } } : any = await api({
			method: 'get',
			url: `/mall/course/course-user-record/getRecentStudy`,
			data: {
				page: recordData.page,
				limit: recordData.limit,
				//type: pays.type
			}
		})
		console.log(records, 'records')
		if (records) {
			recordData.list = recordData.page == 1 ? records : recordData.list.concat(records)

			if (!records.length || recordData.list.length >= total) {
				recordData.loading = 'noMore'
			} else {
				recordData.loading = 'more'
			}

		} else {
			recordData.loading = 'more'
		}
		uni.hideLoading()
	}
	const goCourseDetails = (courseId) => {
		uni.navigateTo({
			url: `/pages/businessSchool/courseDetails/courseDetails?courseId=${courseId}`
		})
	}
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	const onDataInit = async () => {
		recordData.page = 1
		recordData.list = []
	}
	// 页面下拉刷新
	onPullDownRefresh(async () => {
		if (recordData.loading == 'loading') {
			uni.stopPullDownRefresh()
		} else {
			try {
				await onDataInit()
				await getRecord()
			} catch (error) {
			}
			uni.stopPullDownRefresh()
		}
	})
	// 触底
	onReachBottom(async () => {
		if (recordData.loading == 'noMore') return false
		recordData.page++
		await getRecord()
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		min-height: 100%;
		//box-sizing: border-box;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
	}

	.content {
		border-top: 1rpx solid #E4E6E6;
	}

	.course_content {
		margin: 0 auto;
		width: 686rpx;

		.course_content_list {
			margin-top: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1.9rpx solid #E4E6E6;

			.course_content_img {
				position: relative;

				image {
					width: 284rpx;
					height: 160rpx;
					border-radius: 24rpx;
				}

				.course_content_tips {
					padding: 8rpx;
					background-color: #fff;
					border: 1px solid #FF6084;
					border-radius: 8rpx;
					font-size: 22rpx;
					color: #FF6084;
					position: absolute;
					top: 16rpx;
					left: 16rpx;
				}
			}

			.course_content_text {
				padding: 8rpx 0;
				width: 386rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.course_content_text_name {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 1.2;

					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制显示的行数为2 */
					-webkit-box-orient: vertical;
					overflow: hidden;

				}

				.course_content_text_tips {
					font-size: 26rpx;
					color: #7C807F;
					line-height: 1.3;
					word-break: break-word;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制显示的行数为2 */
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.course_content_text_time {
					font-size: 24rpx;
					color: #7C807F;
				}
			}
		}

		.course_content_list:last-child {
			border: none;
		}
	}
</style>